<template>
    <div class="ma-content-block p-4">
        <a-space>
            <a-button type="primary" @click="add"><template #icon><icon-plus /></template>新增</a-button>
        </a-space>
    </div>
    <a-table :columns="columns" :data="tableData" :pagination="pagination" @page-change="changePage">

        <template #optional="{ record }">
            <a-button type="text" status="success" @click="equity(record)" v-if="record.type > 1">
                <template #icon><icon-edit /></template>用户权益</a-button>
            <a-popconfirm @ok="sellsweet(record.id)" content="确定要售罄吗?" position="bottom">
                <a-button type="text">

                    <template #icon><icon-edit /></template>
                    一键售罄
                </a-button>
            </a-popconfirm>
            <a-space>
                <a-button type="text" @click="edit(record)">

                    <template #icon><icon-edit /></template>编辑</a-button>
            </a-space>
            <a-popconfirm @ok="delete_item(record.id)" content="确定要删除该数据吗?" position="bottom">
                <a-button type="text" status="danger">

                    <template #icon><icon-delete /></template>删除</a-button>
            </a-popconfirm>
        </template>
    </a-table>
    <a-modal :width="800" :visible="show" unmount-on-close @ok="save" @cancel="show = false">

        <template #title>
            <span>{{ title }}</span>
        </template>
        <DataModal ref="editRef" @refreshList="refreshList" :id="props_id" />
    </a-modal>

    <a-modal :width="1200" :visible="equity_show" title="用户权益" draggable unmount-on-close :footer="false"
        @cancel="equity_show = false">
        <TableModal :id="props_id" />
    </a-modal>
</template>

<script setup>
import { reactive, ref, shallowRef } from 'vue'
import { Message } from "@arco-design/web-vue";
import DataModal from "@/views/purchase/components/DataModal.vue";
import TableModal from "@/views/purchase/components/TableModal.vue";

import request from '@/api/purchase'
const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        ellipsis: true,
        tooltip: true,
        fixed: 'left',
        align: "center"
    },
    {
        title: '名称',
        dataIndex: 'product.name',
        align: "center"
    },
    {
        title: '类型',
        dataIndex: 'type_name',
        align: "center"
    },
    {
        title: '限购',
        dataIndex: "quota",
        align: "center"
    },
    {
        title: '库存',
        dataIndex: 'stock',
        align: "center"
    },
    {
        title: '开始时间',
        dataIndex: 'start_date',
        align: "center"
    },
    {
        title: '结束时间',
        dataIndex: 'end_date',
        align: "center"
    },
    {
        title: '操作',
        slotName: 'optional',
        align: "center",
        width: 320
    },
];
const tableData = ref([]);
const pagination = reactive({
    total: 1,
    current: 1,
    pageSize: 10,
    showTotal: true,
    showJumper: true
});

const getList = async () => {
    let params = {
        ...{
            page: pagination.current,
            pageSize: pagination.pageSize
        }
    };
    const { data: { data, total } } = await request.get_list(params);
    tableData.value = data;
    pagination.total = total;
};
getList();
const changePage = (current) => {
    pagination.current = current;
    getList();
};
const props_id = ref('');
// 新增
const title = ref("");
const show = ref(false);
const add = () => {
    title.value = "新增";
    props_id.value = "";
    show.value = true;
};
//编辑
const edit = async (record) => {
    title.value = "编辑";
    props_id.value = record.id;
    show.value = true;
};

const editRef = shallowRef();
const save = () => editRef.value.submit();
const refreshList = () => {
    pagination.current = 1;
    show.value = false;
    getList();
};

const delete_item = async (id) => {
    await request.delete_data({
        ids: [id]
    });
    getList();
};

const equity_show = ref(false);
const equity = async (record) => {
    props_id.value = record.id;
    equity_show.value = true;
    // Message.success("敬请期待");
};

const sellsweet = async (id) => {
    await request.sellsweet({ id });
    Message.success("操作成功");
    // getList();
};
</script>